<template>
	<view class="content-box">
		<image :src="sheep.$url.cdn(data.src)" class="top-img" mode="widthFix" v-if="data&&data.src&&data.src.length>0" @click="sheep.$router.go(data.url)">
		</image>
		<view class="task-box ss-flex ss-row-between ss-col-center" v-if="data.show==1">
			<view class="left ss-flex-1 ss-flex justify-center align-center">
				<!-- <view class="gold ss-flex-1 ss-flex flex-column justify-center align-center" @click="gotoSign">
					<view class="num">{{ userInfo?.wallet?.x_point||0}}</view>
					<view class="text">囍豆</view>
				</view> -->
				<view class="jd-card ss-flex-col ss-m-r-40" @click="sign('merchant')">
					<view class="jd-score ss-flex-row ss-row-between">
						<image :src="sheep.$url.cdn('/static/store/jd.png')" style="width: 60rpx;height: 70rpx;margin-right: 10rpx;"></image>
						<view class="ss-flex-col ss-row-center ss-col-center">
							<view class="jd-num">{{userInfo?.wallet?.j_point || 0}}</view>
							<view class="jd-txt">鲸豆</view>
						</view>
					</view>
					<view class="merchant">商家签到</view>
				</view>
				<view class="line"></view>
				<view class="xd-card ss-flex-col ss-m-r-40" @click="sign('user')">
					<view class="jd-score ss-flex-row ss-row-between">
						<view class="ss-flex-col ss-row-center ss-col-center">
							<view class="jd-num">{{userInfo?.wallet?.x_point || 0}}</view>
							<view class="jd-txt">囍豆</view>
						</view>
						<image :src="sheep.$url.cdn('/static/user/8038c80352f3928f45669578b9d1e6b1960b5d8b605cd-1bzIfL_fw1200%404x%20(1).png')" style="width: 90rpx;height: 70rpx;"></image>
						
					</view>
					<view class="merchant">用户签到</view>
				</view>
				<!-- <view class="jd-card ss-flex-col ss-m-r-40">
					<view class="jd-score ss-flex-row">
						<image :src="sheep.$url.cdn('/static/store/jd.png')" style="width: 60rpx;height: 70rpx;margin-right: 50rpx;"></image>
						<view class="ss-flex-col ss-row-center ss-col-center">
							<view class="jd-num">{{userInfo?.wallet?.j_point || 0}}</view>
							<view class="jd-txt">鲸豆</view>
						</view>
					</view>
					<view class="merchant">商家签到</view>
				</view> -->
				<!-- <view class="points ss-flex-1 ss-flex flex-column justify-center align-center" @click="gotoSign">
					<view class="num">{{userInfo?.wallet?.j_point || 0}}</view>
					<view class="text ss-flex align-center">
						<view class="">鲸豆</view>
					</view>
				</view> -->
				<view class="line"></view>
			</view>
			<view class="right ss-flex-row ss-row-center ss-col-center  ss-flex-1" @click="sheep.$router.go('/pages/user/wallet/money')">
				<view class="">钱包</view>
				<image :src="sheep.$url.cdn('/static/user/money-wallet.png')" style="width: 90rpx;height: 90rpx;margin-left: 10rpx;"></image>
			</view>
		</view>
	</view>
	<su-popup :show="showPopup" backgroundColor="transparent" type="center" @close="showPopup = false">
		<view class="storePopup" >
			<image class="smallbell" :src="sheep.$url.cdn('/static/img/shop/app/smallbell.png')" />
			<view class="storePopup-title ss-p-x-40">
				温馨提示
			</view>
			<view class="storePopup-message ss-m-t-10 ss-p-x-40">
				您还不是商家，入驻商家后可使用此功能
			</view>
			<view class="storePopup-btn" hover-class="ss-hover-btn" @click="toStore">立即入驻</view>
		</view>
	</su-popup>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted
	} from 'vue';
	import sheep from '@/sheep';
	import { ygbStaticUrl } from '@/sheep/config';
	import {
		showAuthModal,
	} from '@/sheep/hooks/useModal';
	const headerBg = sheep.$url.css('/static/img/shop/app/popupBg.png',ygbStaticUrl);
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
	});
	const showPopup = ref(false)
	// 用户信息
	const userInfo = computed(() => sheep.$store('user').userInfo);

	// 是否登录
	const isLogin = computed(() => sheep.$store('user').isLogin);

	const signAction = async (mode) => {
		if (isLogin.value) {
			const {
				error,
				data
			} = await sheep.$api.point.signUp({
				from:mode
			})
			// userInfo.value.is_signin = true;
			sheep.$store('user').updateUserData();
		} else {
			showAuthModal()
		}
	}
	
	async function sign(type) {
		
		
		
		//签到跳转
		if(type=='user'){
			//判断是否签到
			if(!userInfo?.value.is_signin_new.user_status === 0){
				signAction('user');
			}else{
				sheep.$router.go('/pages/sign/index');
			}
			
		}else if(type=='merchant'){
			
			const res = await sheep.$api.user.isMerchant();
			
			if(res.error==0){
				if(res.data.status==true){
					if(!userInfo?.value.is_signin_new.shop_status === 0){
						signAction("shop");
					}else{
						sheep.$router.go('/pages/sign/merchant');
					}
				}else{
					// sheep.$router.go('/pages/store/index');
					showPopup.value = true
				}
			}
		}
		
	}
	function toStore(){
		sheep.$router.go('/pages/store/index');
	}
	

	onMounted(() => {
	})
</script>

<style lang="scss" scoped>


	.storePopup{
		position: relative;
		box-sizing: border-box;
		width: 650rpx;
		height: 430rpx;
		background-image: v-bind(headerBg);
		background-size: 800rpx 530rpx;
		background-repeat: no-repeat;
		background-position: center;
		// background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		.smallbell{
			width: 170rpx;
			height: 170rpx;
			position: absolute;
			left: 50%;
			top: 20rpx;
			transform: translate(-50% ,-50%);
		}
		.storePopup-title{
			width: 100%;
			font-family: Source Han Sans;
			margin-top: 130rpx;
			box-sizing: border-box;
			font-size: 36rpx;
			font-weight: bold;
			line-height: normal;
			letter-spacing: normal;
			color: #171717;
		}
		.storePopup-message{
			box-sizing: border-box;
			width: 100%;
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			color: #171717;
		}
		.storePopup-btn{
			width: 480rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
			box-sizing: border-box;
			border-radius: 100rpx;
			background: #426DFA;
			box-shadow: 0rpx 25rpx 50rpx 0rpx rgba(74, 116, 254, 0.41);
			
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: bold;
			line-height: normal;
			letter-spacing: normal;
			color: #FFFFFF;
			
		}
	}
	.task-box {
		width: 710rpx;
		height: 128rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		margin: 0 auto;
		// background-image: url('https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/task-bg2.png');
		// background-size: 100% 100%;
		box-sizing: border-box;

		.left {
			color: var(--ui-BG-5);

			.gold {
				.num {
					font-family: PingFang SC;
					font-size: 36rpx;
					font-weight: normal;
					line-height: normal;
					text-align: center;
				}

				.text {
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: normal;
					text-align: center;
				}
			}

			.line {
				width: 2rpx;
				height: 60rpx;
				border-left: 2rpx solid rgba(43, 110, 222, 0.8);
			}

			.points {
				color: var(--ui-BG-5);

				.num {
					font-family: PingFang SC;
					font-size: 36rpx;
					font-weight: normal;
					line-height: normal;
					text-align: center;
				}

				.text {

					view {
						font-size: 24rpx;

					}

					image {
						width: 12rpx;
						height: 18rpx;
					}
				}
			}
		}

		.right {
			position: relative;

			.sign-pic {
				width: 168rpx;
				height: 95rpx;
				position: absolute;
				right: -50rpx;
				top: -50rpx;
			}

			.ss-reset-button {
				width: 159rpx;
				height: 55rpx;
				border-radius: 10rpx;
				background: #2B6EDE;
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #FFFFFF;
			}
		}
	}

	.top-img {
		width: 100%;
	}
	.jd-card{
		
		width:200rpx;
		margin-left:20rpx;
		.jd-score{
			
			.jd-num{
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: bold;
				line-height: normal;
				letter-spacing: normal;
				color: #313131;
			}
			.jd-txt{
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 550;
				line-height: normal;
				text-align: center;
				letter-spacing: normal;
				color: #313131;
			}
		}
		.merchant{
			border-radius: 10rpx;
			background: #97C79D;
			
			padding-left: 24rpx;
			padding-right:24rpx;
			
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			color: #FFFFFF;
			
			display:flex;
			align-items: center;
			justify-content: center;
		}
		
	}
	.xd-card{
		width:210rpx;
		margin-left:20rpx;
		.jd-score{
			
			.jd-num{
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: bold;
				line-height: normal;
				letter-spacing: normal;
				color: #313131;
			}
			.jd-txt{
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 550;
				line-height: normal;
				text-align: center;
				letter-spacing: normal;
				color: #313131;
			}
		}
		.merchant{
			border-radius: 10rpx;
			background: #2B6EDE;
			
			padding-left: 24rpx;
			padding-right:24rpx;
			
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			color: #FFFFFF;
			
			display:flex;
			align-items: center;
			justify-content: center;
		}
		
	}
</style>